<template>
  <div class="ranking" v-if="state">
    <div class="street bg-ff b-r-5">
      <div class="title pd-10 f-w-b">
        <i class="fa fa-gg"></i>
        街道考评排名
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 街道总分排名 -->
          <street-sum></street-sum>
        </el-col>
        <el-col :span="24">
          <div class="line" style="background-color: #F3F5F7; height: 10px;"></div>
        </el-col>
        <el-col :span="12" class="border">
          <!-- 实地考评排名 -->
          <street-before></street-before>
        </el-col>
        <el-col :span="12">
          <!-- 整改考评排名 -->
          <street-after></street-after>
        </el-col>
      </el-row>
    </div>

    <div class="village bg-ff b-r-5 mt-10">
      <div class="title pd-10 f-w-b">
        <i class="fa fa-gg"></i>
        村考评排名
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 村总分排名 -->
          <village-sum></village-sum>
        </el-col>
        <el-col :span="24" v-if="0">
          <div class="line" style="background-color: #F3F5F7; height: 10px;"></div>
        </el-col>
        <el-col :span="12" class="border">
          <!-- 实地考评排名 -->
          <village-before></village-before>
        </el-col>
        <el-col :span="12">
          <!-- 整改考评排名 -->
          <village-after></village-after>
        </el-col>
      </el-row>
    </div>
    <div class="village bg-ff b-r-5 mt-10">
      <div class="title pd-10 f-w-b">
        <i class="fa fa-gg"></i>
        村类型排名
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 总分排名 -->
          <village-type-sum></village-type-sum>
        </el-col>
        <el-col :span="24">
          <div class="line" style="background-color: #F3F5F7; height: 10px;"></div>
        </el-col>
        <el-col :span="12" class="border">
          <!-- 实地考评排名 -->
          <village-type-before></village-type-before>
        </el-col>
        <el-col :span="12">
          <!-- 整改考评排名 -->
          <village-type-after></village-type-after>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import streetSum from "./street/sum";
import streetBefore from "./street/before";
import streetAfter from "./street/after";
import villageSum from "./village/sum";
import villageBefore from "./village/before";
import villageAfter from "./village/after";
import villageTypeSum from "./villageType/sum";
import villageTypeBefore from "./villageType/before";
import villageTypeAfter from "./villageType/after";
export default {
  components: {
    streetSum,
    streetBefore,
    streetAfter,
    villageSum,
    villageBefore,
    villageAfter,
    villageTypeSum,
    villageTypeBefore,
    villageTypeAfter
  },
  data() {
    return {
      state: false
    };
  },
  created() {
    // 当登录用户为 村和街道管理员时
    var type = this.$store.state.user.type;
    if (type == 3 || type == 4) {
      this.$router.push({ path: "/evaluate" });
    } else {
      this.state = true;
    }
  }
};
</script>
<style scoped>
.ranking .street,
.ranking .village {
  overflow: hidden;
}
.ranking .street > .title,
.ranking .village > .title {
  font-size: 18px;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
  line-height: 40px;
}
</style>